<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <link href="css/upload.css" rel='stylesheet'>
    <link href="css/common.css" rel='stylesheet'>

    <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
    <!-- ele 的引入放在vue下面-->
    <link href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
    <script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
    <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
    <script src="js/index.js"></script>
    <script src="js/common.js"></script>

    <script>
        // 添加请求拦截器
        axios.interceptors.request.use(function (config) {
            // 在发送请求之前做些什么
            var jwt = sessionStorage.getItem("jwt");
            if (jwt) {
                config.headers.authorization = jwt;
            }
            return config;
        }, function (error) {
            // 对请求错误做些什么
            return Promise.reject(error);
        });


        // 添加响应拦截器
        axios.interceptors.response.use(function (response) {
            // 2xx 范围内的状态码都会触发该函数。
            // 对响应数据做点什么
            if (response.headers.authorization) {
                sessionStorage.setItem("jwt", response.headers.authorization);
            }
            return response;
        }, function (error) {
            // 超出 2xx 范围的状态码都会触发该函数。
            // 对响应错误做点什么
            return Promise.reject(error);
        });
    </script>
</head>
<body>
<div id="app">
   <common></common>
    <div class="container">
        <!-- 左侧导航 -->
        <div class="left-nav">
            <div class="nav-section">
                <h2>创作中心</h2>
                <ul>
                    <li>首页</li>
                    <li>内容管理</li>
                    <li>数据中心</li>
                    <li>粉丝管理</li>
                    <li>互动管理</li>
                    <li>收益管理</li>
                    <li>创作成长</li>
                    <li>任务成就</li>
                    <li class="highlight">必火推广</li>
                    <li>创作学院</li>
                    <li>创作权益</li>
                    <li>创作实验室</li>
                </ul>
            </div>

            <div class="nav-section">
                <h2>投稿类型</h2>
                <ul>
                    <li class="highlight">视频投稿</li>
                    <li>短剧投稿</li>
                    <li>专栏投稿</li>
                    <li>互动视频投稿</li>
                    <li>音频投稿</li>
                    <li>贴纸投稿</li>
                    <li>视频素材投稿</li>
                </ul>
            </div>
        </div>

        <!-- 右侧内容 -->
        <div class="right-content">
            <!-- 上传区域 -->
            <div class="upload-area" ref="uploadArea">
               <template v-if="!form.path">
                   <p>拖拽到此处也可上传</p>

                   <div class="upload-container">
                       <input
                               type="file"
                               name="file"
                               class="file-input"
                               id="fileInput"
                               multiple
                               @change="uploads"
                       >
                       <label for="fileInput" class="upload-btn">上传视频</label>
                   </div>

                   <p v-show="percent > 0">{{'视频上传进度'+percent + '%'}}</p>
               </template>
                <template v-else="">
                    <video :src="form.path" class="edVideo" autoplay controls></video>
                    <br>
                    <button @click="clearVideo" style="margin-top: 30px;border: unset;width: 100px;height: 50px;background-color: skyblue;">清除视频</button>
                </template>
            </div>
            <p style="color: red; text-align: center">离开页面后，视频数据将会保存</p>
            <div>
                <el-form v-if="IsShowForm" :model="form" :rules="rules" label-width="100px" class="demo-ruleForm" ref="form">
                    <el-form-item label="视频标题" prop="vname">
                        <el-input v-model="form.vname"></el-input>
                    </el-form-item>
                    <el-form-item label="视频封面" prop="src">
                        <div v-if="form.imageurl == ''">
                            <input
                                   type="file"
                                   name="file"
                                   class="file-input"
                                   id="image"
                                   @change="upload"
                            >
                            <label for="image" class="upload-btn">上传视频封面</label>
                        </div>

                        <el-image v-else
                                style="width: 150px; height: 150px"
                                :src="form.imageurl"
                                fit="contain">

                        </el-image>
                    </el-form-item>
                    <el-form-item label="类型" prop="type">
                        <el-radio-group v-model="form.type">
                            <el-radio label="自制"></el-radio>
                            <el-radio label="转载"></el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="视频分区" prop="categ">
                        <el-select v-model="form.categ"  placeholder="请选择区域">
                            <el-option :label="item.bname" :value="id" v-for="(item, id) in board"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="视频标签" prop="tag">
                        <el-input  placeholder="按回车创建标签" v-model="form.tag"></el-input>
                    </el-form-item>
                    <el-form-item label="视频简介" prop="intro">
                        <el-input type="textarea" v-model="form.intro"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="videoUpload()">立即创建</el-button>
                        <el-button @click="resetForm('form')" type="reset">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>

            <!-- 快捷入口 -->
            <div class="quick-access">
                <ul>
                    <li><span class="highlight">bilibili投稿快捷方式</span></li>
                    <li>保存bilibili投稿入口到桌面，界面更简单，加载更快捷</li>
                </ul>
            </div>

            <div class="quick-access">
                <ul>
                    <li><span class="highlight">必剪桌面端</span></li>
                    <li>一键字幕，完成素材，全屏编辑，支持一键编辑</li>
                </ul>
            </div>

            <!-- 下载区 -->
            <div class="download-section">
                <button class="upload-btn">立即下载</button>
            </div>
        </div>
    </div>


</div>

</body>
<script>

    var v = new Vue({
        el : "#app",
        data : {
            percent: "",
            form:{
                path:"",
                imageurl:"",
                intro:"",
                tag:"",
                type:"",
                categ:"",
                vname:"",
            },
            rules: {
                imageurl: [
                    { required: true, message: '请选择视频封面', trigger: 'blur' }

                ],
                intro: [
                    { required: true, message: '请填写视频简介', trigger: 'change' }
                ],
                tag: [
                    { required: true, message: '请添加视频标签', trigger: 'change' }
                ],
                categ: [
                    { required: true, message: '请选择视频分区', trigger: 'change' }
                ],
                type: [
                    { required: true, message: '请选择视频类型', trigger: 'change' }
                ],
                vname: [
                    { required: true, message: '请填写视频标题', trigger: 'change' }
                ]
            },
            myinfo:{},
            IsShowForm: false, // 视频表单
            board:{}
        },
        created() {
            if(sessionStorage.getItem("video")){
                this.form.path = sessionStorage.getItem("video")
                this.IsShowForm = true;
            }

            axios.get("b-user/login/myinfo").then(res=>this.myinfo = res.data.data.user)
            axios.get("board/getBoard").then(res=>this.board = res.data)
        },
        methods : {
            // 视频上传
            uploads(){
                // 获取用户选择的文件列表（FileList 对象）
                const files = event.target.files;
                if (files.length === 0) return;

                const formData = new FormData();
                formData.append('file', files[0]); // ✅ 附加单个文件
                formData.append('type', 'video');  // ✅ 直接使用 FormData 添加字段
                axios.post("upload/upload", formData, {
                    headers: {
                        'Content-Type': 'multipart/form-data' // ✅ 明确设置请求头
                    },
                    timeout: 300000, // 5 分钟超时（单位：毫秒）
                    onUploadProgress: (progressEvent) => {
                        this.percent = Math.round((progressEvent.loaded / progressEvent.total) * 100);

                    }
                }).then(res=>{
                    this.form.path = res.data.data;
                    this.$message(res.data.msg)
                    sessionStorage.setItem("video", this.form.path)
                    this.IsShowForm = true

                })
            },
            upload(){
                const files = event.target.files;
                if (files.length === 0) return;

                const formData = new FormData();
                formData.append('file', files[0]); // ✅ 附加单个文件
                formData.append('type', 'image');  // ✅ 直接使用 FormData 添加字段
                axios.post("upload/upload", formData
                ).then(res=>{
                    this.form.imageurl = res.data.data;
                    this.$message(res.data.msg)

                })
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            videoUpload(){
                const video = {
                    vname: this.form.vname,
                    tag: this.form.tag,
                    type: this.form.type,
                    categ: this.form.categ,
                    intro: this.form.intro,
                    image: this.form.imageurl,
                    uid: this.myinfo.id,
                    id: null,
                    time: null,
                    path: this.form.path

                }
                axios.post("b-user/upload/videoUpload", video).then(res=>{
                    if(res.data > 0){
                        this.$message("上传成功，等待审核")
                        sessionStorage.removeItem("video")
                    }
                })
            },
            clearVideo(){
                sessionStorage.removeItem("video");
                this.IsShowForm = false;
                this.form.path = ""
                this.$message("清除成功")
            }


        },

        mounted(){
            // 拖拽上传功能
            const uploadArea = this.$refs.uploadArea;

            uploadArea.addEventListener('dragover', (e) => {
                e.preventDefault();
                uploadArea.style.backgroundColor = '#f8f9fa';
            });

            uploadArea.addEventListener('dragleave', () => {
                uploadArea.style.backgroundColor = 'white';
            });

            uploadArea.addEventListener('drop', (e) => {
                e.preventDefault();
                uploadArea.style.backgroundColor = 'white';
                const files = e.dataTransfer.files;
                if(files.length > 0) {
                    console.log('拖拽文件：', files);
                    alert(`通过拖拽选择 ${files.length} 个文件`);
                }
            });

        }

    })
    
    // 文件选择处理
    // document.getElementById('fileInput').addEventListener('change', function(e) {
    //     const files = e.target.files;
    //     if(files.length > 0) {
    //         // 在这里处理选择的文件
    //         console.log('已选择文件：', files);
    //         alert(`已选择 ${files.length} 个文件`);
    //
    //         // 可以在此处添加文件上传逻辑
    //     }
    // });


</script>


</html>